﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>后台管理系统</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link th:href="(${@viewConfig.getRemoteViewUrl()})+'asset/js/bootstrap/css/bootstrap.min.css'" rel="stylesheet"
          href="asset/js/bootstrap/css/bootstrap.min.css">
    <link th:href="(${@viewConfig.getRemoteViewUrl()})+'asset/css/font-awesome.min.css'" rel="stylesheet"
          href="asset/css/font-awesome.min.css">
    <link th:href="(${@viewConfig.getRemoteViewUrl()})+'asset/css/index.css'" rel="stylesheet"
          href="asset/css/index.css">
    <script th:src="(${@viewConfig.getRemoteViewUrl()})+'asset/js/jquery/jQuery-2.2.0.min.js'"
            src="asset/js/jquery/jQuery-2.2.0.min.js"></script>
    <script th:src="(${@viewConfig.getRemoteViewUrl()})+'asset/js/echarts.common.min.js'"
            src="asset/js/echarts.common.min.js"></script>
    <script>
        $(function () {
            lineReport();
            Report1();
            Report2();
            Report3();
        });

        function Report1() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('report1'));
            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '轮胎状态分布图',
                    subtext: '总数30',
                    x: 'center',
                    top: 1,
                    buttom: 2
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    left: 'center',
                    bottom: 10,
                    data: ['在家', '注销', '在车']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: [
                            {value: 335, name: '在库'},
                            {value: 234, name: '注销'},
                            {value: 310, name: '在车'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function Report2() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('report2'));
            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '轮胎状态分布图',
                    subtext: '总数30',
                    x: 'center',
                    top: 1,
                    buttom: 2
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    left: 'center',
                    bottom: 10,
                    data: ['在家', '注销', '在车']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: [
                            {value: 335, name: '在库'},
                            {value: 234, name: '注销'},
                            {value: 310, name: '在车'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function Report3() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('report3'));
            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '轮胎状态分布图',
                    subtext: '总数30',
                    x: 'center',
                    top: 1,
                    buttom: 2
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    left: 'center',
                    bottom: 10,
                    data: ['在库', '注销', '在车']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: [
                            {value: 335, name: '在库'},
                            {value: 234, name: '注销'},
                            {value: 310, name: '在车'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        //折线图
        function lineReport() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('lineReport'));

            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '损坏情况',
                    subtext: '总数30',
                    x: 'center',
                    top: 1,
                    buttom: 2
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    symbolOffset:[3,'40%']
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function Canvas3() {
            var randomScalingFactor = function () {
                return Math.round(Math.random() * 100)
            };
            var lineChartData = {
                labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "8月", "10月", "11月", "12月"],
                datasets: [
                    {
                        fillColor: "#578ebe",
                        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
                    }
                ]
            }
            var ctx = document.getElementById("Canvas3").getContext("2d");
            window.myLine = new Chart(ctx).Bar(lineChartData, {
                bezierCurve: false,

            });
        }
    </script>
</head>
<body>
<div id="wrapper wrapper-content areascontent">
    <div class="rows" style="margin-bottom: 0.8%; overflow: hidden; ">
        <div style="float: left; width: 69.2%;">
            <div style="height: 100%; border: 1px solid #e6e6e6; overflow: hidden;">
                <div class="dashboard-stats">
                    <div class="dashboard-stats-item" style="background-color: #578ebe;">
                        <div class="stat-icon">
                            <i class="fa fa-clock-o"></i>
                        </div>
                        <div class="dashboard-stats-item-content">
                            <h2 class="m-top-none">172<span>个</span></h2>
                            <h5>注册轮胎数</h5>
                        </div>

                    </div>
                </div>
                <div class="dashboard-stats">
                    <div class="dashboard-stats-item" style="background-color: #e35b5a;">
                        <div class="dashboard-stats-item-content">
                            <h2 class="m-top-none">30<span>个</span></h2>
                            <h5>在库轮胎数</h5>
                        </div>
                        <div class="stat-icon">
                            <i class="fa fa-bell"></i>
                        </div>
                    </div>
                </div>
                <div class="dashboard-stats">
                    <div class="dashboard-stats-item" style="background-color: #44b6ae;margin-right: 0px">
                        <div class="dashboard-stats-item-content">
                            <h2 class="m-top-none">20<span>个</span></h2>
                            <h5>在车轮胎数
                            </h5>
                        </div>
                        <div class="stat-icon">
                            <i class="fa fa-envelope-o"></i>
                        </div>
                    </div>
                </div>
                <div class="dashboard-stats">
                    <div class="dashboard-stats-item" style="background-color: #8775a7;margin-bottom: 0px">
                        <div class="dashboard-stats-item-content">
                            <h2 class="m-top-none">20<span>个</span></h2>
                            <h5>注销轮胎数</h5>
                        </div>
                        <div class="stat-icon">
                            <i class="fa fa-gavel"></i>
                        </div>
                    </div>
                </div>
                <div class="dashboard-stats">
                    <div class="dashboard-stats-item" style="background-color: #4f5c65;margin-bottom: 0px">
                        <div class="dashboard-stats-item-content">
                            <h2 class="m-top-none">24<span>个</span></h2>
                            <h5>翻新轮胎数</h5>
                        </div>
                        <div class="stat-icon">
                            <i class="fa fa-shopping-cart"></i>
                        </div>
                    </div>
                </div>
                <div class="dashboard-stats">
                    <div class="dashboard-stats-item"
                         style="background-color: #14aae4;margin-right: 0px;margin-bottom: 0px">
                        <div class="dashboard-stats-item-content">
                            <h2 class="m-top-none">10<span>辆</span></h2>
                            <h5>注册车辆数</h5>
                        </div>
                        <div class="stat-icon">
                            <i class="fa fa-file-text-o"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="float: right; width: 30%;">
            <div style="height: 260px; border: 1px solid #e6e6e6; background-color: #fff;padding: 10px">
                <div id="lineReport" style="height: 100%; width: 100%;"></div>
            </div>
        </div>
    </div>
    <div class="rows" style="margin-bottom: 0.8%; overflow: hidden; height: 330px">
        <div style="float: left; width: 33.3%; height: 100%;padding-right: 10px">
            <div class="panel panel-default" style="height:100%; border: 1px solid #e6e6e6; background-color: #fff; ">
                <div class="panel-body" id="report1" style="height: 100%; height:100%"></div>
            </div>
        </div>
        <div style="float: left; width: 33.3%; height: 100%;padding-right: 10px">
            <div class="panel panel-default" style="height:100%; border: 1px solid #e6e6e6; background-color: #fff;">
                <div class="panel-body" id="report2" style="height: 100%; height:100%"></div>
            </div>
        </div>
        <div style="float: left; width: 33.3%; height: 100%">
            <div class="panel panel-default" style="height:100%; border: 1px solid #e6e6e6; background-color: #fff;">
                <div class="panel-body" id="report3" style="height: 100%; height:100%"></div>
            </div>

        </div>
    </div>
</div>
<style>
    #copyrightcontent {
        height: 30px;
        line-height: 29px;
        overflow: hidden;
        position: absolute;
        top: 100%;
        margin-top: -30px;
        width: 100%;
        background-color: #fff;
        border: 1px solid #e6e6e6;
        padding-left: 10px;
        padding-right: 10px;
    }

    .dashboard-stats {
        float: left;
        width: 33.33%;
    }

    .dashboard-stats-item {
        position: relative;
        overflow: hidden;
        color: #fff;
        cursor: pointer;
        height: 125px;
        margin-right: 10px;
        margin-bottom: 10px;
        padding-left: 30px;
        padding-top: 30px;
    }

    .dashboard-stats-item-content {
        padding-left: 85px
    }

    .dashboard-stats-item .m-top-none {
        margin-top: 5px;
    }

    .dashboard-stats-item h2 {
        font-size: 28px;
        font-family: inherit;
        line-height: 1.1;
        font-weight: 500;
    }

    .dashboard-stats-item h2 span {
        font-size: 12px;
        padding-left: 5px;
    }

    .dashboard-stats-item h5 {
        font-size: 12px;
        font-family: inherit;
        margin-top: 1px;
        line-height: 1.1;
    }

    .dashboard-stats-item .stat-icon {
        position: absolute;
        top: 18px;
        font-size: 70px;
        opacity: .3;
    }

    .dashboard-stats i.fa.stats-icon {
        width: 50px;
        padding: 20px;
        font-size: 50px;
        text-align: center;
        color: #fff;
        height: 50px;
        border-radius: 10px;
    }

    .panel-default {
        border: none;
        border-radius: 0px;
        margin-bottom: 0px;
        box-shadow: none;
        -webkit-box-shadow: none;
    }

    .panel-default > .panel-heading {
        color: #777;
        background-color: #fff;
        border-color: #e6e6e6;
        padding: 10px 10px;
    }

    .panel-default > .panel-body {
        padding: 10px;
        padding-bottom: 0px;
    }

    .panel-default > .panel-body ul {
        overflow: hidden;
        padding: 0;
        margin: 0px;
        margin-top: -5px;
    }

    .panel-default > .panel-body ul li {
        line-height: 27px;
        list-style-type: none;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .panel-default > .panel-body ul li .time {
        color: #a1a1a1;
        float: right;
        padding-right: 5px;
    }
</style>
</body>
</html>
